
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Echarts</title>
    <meta charset="UTF-8">
    <title>趋势图</title>
<%--    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>--%>
<%--    <script src="js/echarts.js"></script>--%>
<%--    <script src="js/jquery.js"></script>--%>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

    <style>
        div{float: left;  white-space: nowrap;}
    </style>

</head>
<body>

<div id="main" style="width: 600px; height: 400px;background-color: chartreuse"></div>
<br>


<script type="text/javascript">

    var myChartproCountTrend = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    var option = ({
        color: ["#00FFFF"],
        title: {
            text: '分数比例图'
        },
        tooltip: {
            trigger: 'axis', //坐标轴触发提示框，多用于柱状、折线图中
        },
        legend: {
            // name :"项目总数趋势(季度)",
            data: ['分数统计']
        },
        xAxis: {
            name: "分数",
            type: 'category',
            data: []
        },
        yAxis: {
            name: "次数"
        },
        series: [{
            name: '次数',
            type: 'line',
            data: [],
            color: ["#FCCE10"],//黄色
            itemStyle: {        //上方显示数值
                normal: {
                    label: {
                        show: true, //开启显示
                        position: 'top', //在上方显示
                        textStyle: { //数值样式
                            color: 'black',
                            fontSize: 16
                        }
                    }
                }
            }
        },
            {
                type: 'bar',
                data: []
            }
        ]
    });


    // myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画


    //====== 获取后台数据,并加载 到echarts 表格

    var namesNew = [];     //类别数组（实际用来盛放X轴坐标值）
    var numsNew = [];       //销量数组（实际用来盛放Y坐标值）

    $.ajax({
        type: "get",
        async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: "/ScoreInfo",
        dataType: "json",
        success: function (data) {
            // alert("================"+data);  调试data 是否有数据

            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (data.code == 'success') {

                var obj = eval(data.items);     //解析后台传来的json数据

                for (var i = 0; i < obj.length; i++) {
                    namesNew.push(obj[i].name);

                    numsNew.push(obj[i].num);
                }


                myChartproCountTrend.hideLoading(); //隐藏加载动画

                myChartproCountTrend.setOption({ //加载数据图表
                    xAxis: {
                        data: namesNew
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '次数',
                        data: numsNew
                    }, {
                        name: '次数',
                        data: numsNew
                    }
                    ]
                });
            }
            else {
                alert("后台数据获取失败!");
            }
        },

        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChartproCountTrend.hideLoading();
        }
    });



    myChartproCountTrend.setOption(option);

</script>
<%--<a href="/teacher_main.jsp" > 返回 </a>--%>
</body>
</html>
